<template>
  <div class="phone-digital">
    <div class="top-img"></div>
    <div class="tab-container">
      <!-- 标签栏 -->
      <div class="tabs">
        <button v-for="(tab, index) in tabs" :key="index" :class="{ active: currentTab === index }"
          @click="currentTab = index">
          {{ tab.name }}
        </button>
      </div>
      <!-- 内容区域：修复后可容纳5列 -->
      <div class="tab-content">
        <div v-for="(tab, index) in tabs" :key="index" v-show="currentTab === index" class="content-item">
          <div v-for="(product, productIndex) in tab.products" :key="productIndex" class="product-card">
            <img :src="product.img" alt="product" class="product-img" />
            <p class="product-name">{{ product.name }}</p>
            <button class="sell-btn">卖了换钱</button>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-logo"></div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
// 模拟标签数据（保持10个商品，确保两行五列填满）
import img1 from '../../../assets/imgs/recycle/phones/phone1_img.png';
import img2 from '../../../assets/imgs/recycle/phones/ipad1_img.png';
import img3 from '../../../assets/imgs/recycle/phones/computer1_img.png';
import img4 from '../../../assets/imgs/recycle/phones/camera1_img.png';
import img5 from '../../../assets/imgs/recycle/phones/copmputerother1_img.png';
import img6 from '../../../assets/imgs/recycle/phones/radio1_img.png';
const tabs = ref([
  {
    name: '手机',
    products: [
      { name: '苹果 iPhone 13', img: img1 },
      { name: '苹果 iPhone 12', img: img1 },
      { name: '苹果 iPhone 11', img: img1 },
      { name: '华为 Mate 60', img: img1 },
      { name: '小米 14', img: img1 },
      { name: 'OPPO Find X7', img: img1 },
      { name: 'vivo X100', img: img1 },
      { name: '荣耀 Magic6', img: img1 },
      { name: '三星 S24', img: img1 },
      { name: '一加 12', img: img1 },
    ],
  },
  {
    name: '平板电脑',
    products: [
      { name: '苹果 iPad Pro', img: img2 },
      { name: '苹果 iPad Air', img: img2 },
      { name: '华为 MatePad Pro', img: img2 },
      { name: '小米 Pad 6', img: img2 },
      { name: '联想小新 Pad', img: img2 },
      { name: '荣耀 V8 Pro', img: img2 },
      { name: 'OPPO Pad 2', img: img2 },
      { name: 'vivo Pad2', img: img2 },
      { name: '三星 Tab S9', img: img2 },
      { name: '微软 Surface Go', img: img2 },
    ],
  },
  {
    name: '笔记本', products: [
      { name: 'MacBook Pro', img: img3 },
      { name: 'MacBook Air', img: img3 },
      { name: 'Dell XPS 13', img: img3 },
      { name: 'HP Spectre x360', img: img3 },
      { name: 'Lenovo ThinkPad X1', img: img3 },
      { name: 'Asus ZenBook 14', img: img3 },
      { name: 'Acer Swift 5', img: img3 },
      { name: 'Microsoft Surface Laptop', img: img3 },
      { name: 'Razer Blade Stealth', img: img3 },
      { name: 'Google Pixelbook Go', img: img3 },
    ]
  },
  {
    name: '摄影摄像', products: [
      { name: 'Canon EOS 80D', img: img4 },
      { name: 'Nikon D7500', img: img4 },
      { name: 'Sony Alpha a6400', img: img4 },
      { name: 'Fujifilm X-T30', img: img4 },
      { name: 'Panasonic Lumix G85', img: img4 },
      { name: 'GoPro HERO9', img: img4 },
      { name: 'DJI Osmo Action', img: img4 },
      { name: 'Canon PowerShot G7 X', img: img4 },
      { name: 'Nikon COOLPIX P1000', img: img4 },
      { name: 'Sony RX100 VII', img: img4 },
    ]
  },
  {
    name: '电脑配件', products: [
      { name: '华硕ROG Zephyrus G14', img: img5 },
      { name: '雷蛇Razer Blade 15', img: img5 },
      { name: '戴尔Alienware m15', img: img5 },
      { name: '宏碁Predator Helios 300', img: img5 },
      { name: '惠普Omen 15', img: img5 },
      { name: '联想Legion 5', img: img5 },
      { name: '微星GS66 Stealth', img: img5 },
      { name: '华为MateBook X Pro', img: img5 },
      { name: '小米笔记本Pro 15', img: img5 },
      { name: '荣耀MagicBook Pro', img: img5 },
    ]
  },
  {
    name: '智能影音', products: [
      { name: 'Apple AirPods Pro', img: img6 },
      { name: 'Sony WH-1000XM4', img: img6 },
      { name: 'Bose QuietComfort 35 II', img: img6 },
      { name: 'Jabra Elite 75t', img: img6 },
      { name: 'Beats Solo Pro', img: img6 },
      { name: 'Samsung Galaxy Buds Pro', img: img6 },
      { name: 'Anker Soundcore Liberty Air 2', img: img6 },
      { name: 'Sennheiser Momentum True Wireless 2', img: img6 },
      { name: 'Google Pixel Buds A-Series', img: img6 },
      { name: 'Amazon Echo Buds (2nd Gen)', img: img6 },
    ]
  },
]);
const currentTab = ref(0);
</script>

<style scoped lang="scss">
.phone-digital {
  height: auto;
  padding: 0 190px;

  .top-img {
    background: url('https://m.360buyimg.com/babel/jfs/t1/165583/30/34051/56229/654b3a80F39aa8f29/6ab6ae6462c6eed5.png') no-repeat;
    background-size: cover;
    width: 100%;
    height: 94px;
  }

  .tab-container {
    // 修复核心：最大宽度 = 卡片+间距总宽 + content-item左右padding（15px×2）
    width: 100%;
    max-width: calc(168px * 5 + 20px * 4 + 15px * 2); // 920px + 30px = 950px
    margin: 15px auto 0; // 水平居中
  }

  .tabs {
    display: flex;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 10px;

    button {
      width: 156px;
      height: 58px;
      padding: 8px 16px;
      border: none;
      background-color: rgb(245, 248, 253);
      border-radius: 10px;
      cursor: pointer;
      white-space: nowrap;
      font-size: 14px;

      &.active {
        background-color: #ffcc00;
        color: #333;
      }
    }
  }



  .content-item {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
    max-height: 470px;
    overflow: hidden;
    background-color: rgb(245, 245, 245);
    padding: 15px; 
    border-radius: 8px;
  }

  // 固定卡片尺寸：168px×225px（不变）
  .product-card {
    width: 168px;
    height: 225px;
    margin: 0;
    text-align: center;
    box-sizing: border-box;
    padding: 12px;
    background-color: #fff;
    border-radius: 6px;
  }

  .product-img {
    width: 100%;
    height: 120px;
    object-fit: contain;
    background-color: #fafafa;
    border-radius: 4px;
    margin-bottom: 10px;
  }

  .product-name {
    font-size: 13px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0 0 12px;
    color: #333;
  }

  .sell-btn {
    width: 70%;
    height: 25px;
    background-color: #ff9900;
    color: #fff;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    font-size: 13px;
    line-height: 32px;
    padding: 0;
    margin-bottom: 10px;

    &:hover {
      background-color: #ff8800;
    }
  }

  .bottom-logo {
    background: url('../../../assets/imgs/recycle/bottom_logo.png') no-repeat;
    background-size: cover;
    width: 100%;
    height: 90px;
  }

}
</style>
